<template>
  <div class="product-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-text">Loading...</div>
    </div>

    <!-- 空状态 -->
    <div v-else-if="!hasProducts" class="empty-container">
      <el-empty description="No Data ..." />
    </div>

    <div v-else class="des-container pt-[16px]">
      <div v-for="item in list" class="designs_item" :key="item.aid">
        <div class="bg_img_view cursor-pointer" @click="goContest(item)">
          <img class="back_img" :src="item.back_img" alt="" />
        </div>
        <div class="flex_row_s mt-[16px] mb-[16px]">
          <h3 class="product-name ml-[24px]">
            {{ item.title }}
          </h3>
          <div
            v-if="item.status === ActivityStatus.Upcoming"
            class="flex items-center gap-[8px] px-[24px] py-[8px] bg-[#E9F5FF]"
            style="border-radius: 44px 0 0 44px">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none">
              <path
                d="M12 2.25C6.61547 2.25 2.25 6.61547 2.25 12C2.25 17.3845 6.61547 21.75 12 21.75C17.3845 21.75 21.75 17.3845 21.75 12C21.75 6.61547 17.3845 2.25 12 2.25ZM16.5 13.5H12C11.8011 13.5 11.6103 13.421 11.4697 13.2803C11.329 13.1397 11.25 12.9489 11.25 12.75V6C11.25 5.80109 11.329 5.61032 11.4697 5.46967C11.6103 5.32902 11.8011 5.25 12 5.25C12.1989 5.25 12.3897 5.32902 12.5303 5.46967C12.671 5.61032 12.75 5.80109 12.75 6V12H16.5C16.6989 12 16.8897 12.079 17.0303 12.2197C17.171 12.3603 17.25 12.5511 17.25 12.75C17.25 12.9489 17.171 13.1397 17.0303 13.2803C16.8897 13.421 16.6989 13.5 16.5 13.5Z"
                fill="#0066CC" />
            </svg>
            <div class="text-[#0066CC] time_text">Begin in {{ diffTime(item?.start_time) }}d</div>
          </div>
          <div
            v-else-if="item.status === ActivityStatus.Live"
            class="flex items-center gap-[8px] px-[24px] py-[8px] bg-[#FFF2F2]"
            style="border-radius: 44px 0 0 44px">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none">
              <path
                d="M18.4795 9.26062C17.8988 7.71887 17.0521 6.29096 15.9778 5.04187C14.1187 2.88984 11.6742 1.5 9.75 1.5C9.63558 1.50009 9.5227 1.52635 9.42 1.57678C9.3173 1.6272 9.22749 1.70046 9.15746 1.79094C9.08743 1.88142 9.03903 1.98673 9.01596 2.09879C8.99289 2.21086 8.99577 2.32672 9.02437 2.4375C9.67453 4.92188 8.32688 6.98766 6.90047 9.17438C5.71875 10.9856 4.5 12.8564 4.5 15C4.5 19.1353 7.86469 22.5 12 22.5C16.1353 22.5 19.5 19.1353 19.5 15C19.5 12.9703 19.1569 11.0395 18.4795 9.26062ZM13.5155 19.6261C13.0312 20.1417 12.4242 20.25 12 20.25C11.5758 20.25 10.9688 20.1417 10.4845 19.6261C10.0003 19.1105 9.75 18.2925 9.75 17.25C9.75 16.0716 10.1634 15.1744 10.5628 14.3072C10.7948 13.8038 11.0316 13.2914 11.1722 12.743C11.1871 12.6833 11.2165 12.6282 11.2577 12.5826C11.2989 12.537 11.3508 12.5022 11.4086 12.4813C11.4664 12.4604 11.5285 12.4541 11.5894 12.4628C11.6503 12.4716 11.7081 12.4952 11.7577 12.5316C12.1864 12.8633 12.5676 13.2522 12.8906 13.6875C13.7423 14.8125 14.25 16.1447 14.25 17.25C14.25 18.2925 13.9959 19.1142 13.5155 19.6261Z"
                fill="#E53935" />
            </svg>
            <div class="text-[#E53935] time_text">
              Live Now | Ends in {{ diffTime(item?.end_time) }}d
            </div>
          </div>
          <div
            v-else
            class="flex items-center gap-[8px] px-[24px] py-[8px] bg-[#F8F8F8]"
            style="border-radius: 44px 0 0 44px">
            <div class="text-[#7A7A7A] time_text">Ended</div>
          </div>
        </div>
        <svg
          v-if="item.showLeftArrow"
          @click="scrollView(item, 'left')"
          class="left_btn cursor-pointer"
          xmlns="http://www.w3.org/2000/svg"
          width="40"
          height="40"
          viewBox="0 0 40 40"
          fill="none">
          <g clip-path="url(#clip0_2733_21547)">
            <circle cx="20" cy="20" r="20" fill="black" fill-opacity="0.32" />
            <path
              d="M23.5716 12.8574L16.4287 20.0003L23.5716 27.1431"
              stroke="white"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round" />
          </g>
          <defs>
            <clipPath id="clip0_2733_21547">
              <rect width="40" height="40" fill="white" />
            </clipPath>
          </defs>
        </svg>
        <svg
          v-if="item.showRightArrow"
          @click="scrollView(item, 'right')"
          class="right_btn cursor-pointer"
          xmlns="http://www.w3.org/2000/svg"
          width="40"
          height="40"
          viewBox="0 0 40 40"
          fill="none">
          <g clip-path="url(#clip0_2733_13015)">
            <circle cx="20" cy="20" r="20" fill="black" fill-opacity="0.32" />
            <path
              d="M16.4287 12.8574L23.5716 20.0003L16.4287 27.1431"
              stroke="white"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round" />
          </g>
          <defs>
            <clipPath id="clip0_2733_13015">
              <rect width="40" height="40" fill="white" />
            </clipPath>
          </defs>
        </svg>
        <div
          class="feed_list"
          :ref="
            (el) => {
              if (el) scrollRefs[item.aid] = el;
            }
          ">
          <div
            v-for="product in item?.feeds || []"
            :key="product.feed_id"
            class="masonry-item text-[#222] cursor-pointer"
            @click="viewProduct(product)">
            <div class="product-image relative">
              <img v-img-zoom class="pro_img" :src="product?.thumbnail?.url" />
              <div v-if="[1, 2, 3].includes(product?.nex_status)" class="voted_icon">
                <svg
                  v-if="product?.nex_status === 1"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none">
                  <path
                    d="M18.4795 9.26062C17.8988 7.71887 17.0521 6.29096 15.9778 5.04187C14.1187 2.88984 11.6742 1.5 9.75 1.5C9.63558 1.50009 9.5227 1.52635 9.42 1.57678C9.3173 1.6272 9.22749 1.70046 9.15746 1.79094C9.08743 1.88142 9.03903 1.98673 9.01596 2.09879C8.99289 2.21086 8.99577 2.32672 9.02437 2.4375C9.67453 4.92188 8.32688 6.98766 6.90047 9.17438C5.71875 10.9856 4.5 12.8564 4.5 15C4.5 19.1353 7.86469 22.5 12 22.5C16.1353 22.5 19.5 19.1353 19.5 15C19.5 12.9703 19.1569 11.0395 18.4795 9.26062ZM13.5155 19.6261C13.0312 20.1417 12.4242 20.25 12 20.25C11.5758 20.25 10.9688 20.1417 10.4845 19.6261C10.0003 19.1105 9.75 18.2925 9.75 17.25C9.75 16.0716 10.1634 15.1744 10.5628 14.3072C10.7948 13.8038 11.0316 13.2914 11.1722 12.743C11.1871 12.6833 11.2165 12.6282 11.2577 12.5826C11.2989 12.537 11.3508 12.5022 11.4086 12.4813C11.4664 12.4604 11.5285 12.4541 11.5894 12.4628C11.6503 12.4716 11.7081 12.4952 11.7577 12.5316C12.1864 12.8633 12.5676 13.2522 12.8906 13.6875C13.7423 14.8125 14.25 16.1447 14.25 17.25C14.25 18.2925 13.9959 19.1142 13.5155 19.6261Z"
                    fill="#F76B1B" />
                </svg>
                <svg
                  v-else-if="product?.nex_status === 2"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none">
                  <path
                    d="M12.5964 15.6488C12.403 15.6632 12.2077 15.6703 12.0106 15.6703C11.7709 15.6703 11.534 15.6593 11.2998 15.6387C10.1411 15.536 9.01839 15.1841 8.00841 14.6071C6.99844 14.0301 6.12511 13.2416 5.44823 12.2956C5.4304 12.2702 5.40641 12.2497 5.37849 12.2361C5.35058 12.2225 5.31966 12.2162 5.28865 12.2178C5.25763 12.2194 5.22753 12.2288 5.20117 12.2453C5.17481 12.2617 5.15305 12.2845 5.13794 12.3117L1.83794 18.2425C1.71236 18.4717 1.69265 18.7467 1.82511 18.9703C1.89406 19.0812 1.99012 19.1728 2.10422 19.2363C2.21833 19.2998 2.34673 19.3332 2.47732 19.3333H6.05232C6.17685 19.3287 6.30035 19.3574 6.41009 19.4165C6.51982 19.4755 6.61181 19.5628 6.67657 19.6693L8.44848 22.6333C8.51332 22.7433 8.60533 22.8348 8.71568 22.899C8.82604 22.9632 8.95103 22.998 9.07869 23C9.35094 22.9849 9.63282 22.808 9.74602 22.56L12.7761 15.9073C12.7891 15.8784 12.7945 15.8466 12.7916 15.815C12.7887 15.7834 12.7777 15.7531 12.7596 15.7271C12.7415 15.701 12.7169 15.6801 12.6883 15.6664C12.6597 15.6527 12.628 15.6466 12.5964 15.6488Z"
                    fill="#1DD129" />
                  <path
                    d="M22.1591 18.2278L18.8806 12.3075C18.8655 12.2807 18.8438 12.2581 18.8176 12.2418C18.7914 12.2255 18.7615 12.2161 18.7307 12.2145C18.6999 12.2128 18.6692 12.219 18.6414 12.2324C18.6136 12.2458 18.5896 12.2659 18.5717 12.291C17.6701 13.5543 16.4242 14.5315 14.9825 15.1061C14.8055 15.1759 14.6623 15.3114 14.5828 15.4842L12.8934 19.2013C12.8716 19.2488 12.8604 19.3004 12.8604 19.3526C12.8604 19.4048 12.8716 19.4564 12.8934 19.5038L14.2808 22.5559C14.3931 22.8038 14.6745 22.9849 14.9463 23C15.074 22.9969 15.1988 22.961 15.3088 22.8958C15.4187 22.8307 15.5101 22.7384 15.5742 22.6278L17.3401 19.6679C17.4726 19.4456 17.7128 19.332 17.9717 19.3333H21.582C21.8877 19.3333 22.1192 19.1738 22.2237 18.875C22.2604 18.7689 22.2737 18.6561 22.2625 18.5443C22.2513 18.4326 22.2161 18.3246 22.1591 18.2278Z"
                    fill="#1DD129" />
                  <path
                    d="M12.0125 9.8C13.2278 9.8 14.2129 8.81503 14.2129 7.6C14.2129 6.38497 13.2278 5.4 12.0125 5.4C10.7972 5.4 9.81202 6.38497 9.81202 7.6C9.81202 8.81503 10.7972 9.8 12.0125 9.8Z"
                    fill="#1DD129" />
                  <path
                    d="M12.0125 1C8.3724 1 5.41248 3.96037 5.41248 7.6C5.41248 11.2396 8.37377 14.2 12.0125 14.2C15.6512 14.2 18.6125 11.2392 18.6125 7.6C18.6125 3.96083 15.6521 1 12.0125 1ZM12.0125 11.2667C11.2873 11.2667 10.5784 11.0516 9.97539 10.6487C9.37241 10.2458 8.90245 9.67317 8.62492 9.00317C8.3474 8.33318 8.27479 7.59593 8.41627 6.88467C8.55775 6.17341 8.90696 5.52007 9.41976 5.00728C9.93255 4.49448 10.5859 4.14527 11.2972 4.00379C12.0084 3.86231 12.7457 3.93492 13.4157 4.21244C14.0857 4.48996 14.6583 4.95993 15.0612 5.56291C15.4641 6.16589 15.6791 6.8748 15.6791 7.6C15.6779 8.57209 15.2912 9.50401 14.6039 10.1914C13.9165 10.8788 12.9846 11.2655 12.0125 11.2667Z"
                    fill="#1DD129" />
                </svg>
                <svg
                  v-else-if="product?.nex_status === 3"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none">
                  <path
                    d="M20.5954 8.13393C20.4671 8.00057 20.3144 7.89482 20.1462 7.82278C19.9779 7.75075 19.7975 7.71387 19.6154 7.71429H16.8461V7C16.8461 5.67392 16.3356 4.40215 15.4267 3.46447C14.5179 2.52678 13.2853 2 12 2C10.7147 2 9.48208 2.52678 8.57325 3.46447C7.66442 4.40215 7.15384 5.67392 7.15384 7V7.71429H4.38461C4.01739 7.71429 3.66521 7.8648 3.40554 8.13271C3.14588 8.40061 3 8.76398 3 9.14286V18.7857C3 20.5268 4.42788 22 6.11538 22H17.8846C18.7009 22.0003 19.4848 21.671 20.0688 21.0826C20.3627 20.7933 20.5968 20.4456 20.7568 20.0604C20.9168 19.6752 20.9996 19.2606 21 18.8415V9.14286C21.0006 8.95544 20.9651 8.76977 20.8956 8.59659C20.8262 8.42341 20.7242 8.26615 20.5954 8.13393ZM8.53846 7C8.53846 6.0528 8.90316 5.14439 9.55232 4.47462C10.2015 3.80485 11.0819 3.42857 12 3.42857C12.9181 3.42857 13.7985 3.80485 14.4477 4.47462C15.0968 5.14439 15.4615 6.0528 15.4615 7V7.71429H8.53846V7ZM16.8461 11.2857C16.8461 12.6118 16.3356 13.8836 15.4267 14.8212C14.5179 15.7589 13.2853 16.2857 12 16.2857C10.7147 16.2857 9.48208 15.7589 8.57325 14.8212C7.66442 13.8836 7.15384 12.6118 7.15384 11.2857V10.5714C7.15384 10.382 7.22678 10.2003 7.35662 10.0664C7.48645 9.9324 7.66254 9.85714 7.84615 9.85714C8.02976 9.85714 8.20585 9.9324 8.33569 10.0664C8.46552 10.2003 8.53846 10.382 8.53846 10.5714V11.2857C8.53846 12.2329 8.90316 13.1413 9.55232 13.8111C10.2015 14.4809 11.0819 14.8571 12 14.8571C12.9181 14.8571 13.7985 14.4809 14.4477 13.8111C15.0968 13.1413 15.4615 12.2329 15.4615 11.2857V10.5714C15.4615 10.382 15.5345 10.2003 15.6643 10.0664C15.7941 9.9324 15.9702 9.85714 16.1538 9.85714C16.3375 9.85714 16.5135 9.9324 16.6434 10.0664C16.7732 10.2003 16.8461 10.382 16.8461 10.5714V11.2857Z"
                    fill="#222222" />
                </svg>
              </div>
            </div>
            <div class="product-info">
              <div class="flex justify-between text-[14px]">
                <div class="right-meta flex items-center">
                  <div class="flex items-center gap-[4px]" @click.stop="handleVote(product, item)">
                    <VoteIcon :color="product.is_vote ? '#F76B1B' : '#CBCBCB'" />
                    <span class="font-[500]">
                      {{ formatNumber(product?.counter?.vote_count) }}
                    </span>
                  </div>
                  <div class="flex items-center gap-[4px] ml-[8px]">
                    <svg
                      v-svg-hover
                      class="base_svg_color"
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                      fill="currentColor">
                      <path
                        d="M17.7054 5.0025C16.084 3.70526 14.0692 2.99898 11.9928 3C9.54512 3 7.25896 3.94299 5.54977 5.6554C3.89803 7.31237 2.99281 9.50009 3.00004 11.814C3.0001 13.5104 3.49814 15.1696 4.43241 16.5856L4.44004 16.5964C4.45129 16.6129 4.46294 16.6294 4.47459 16.6454C4.48624 16.6615 4.50071 16.6824 4.50392 16.6876L4.51276 16.7037C4.55816 16.7841 4.59312 16.8821 4.56218 16.9809L3.82209 19.6592C3.79249 19.7588 3.77627 19.8619 3.77388 19.9658C3.77335 20.2391 3.8812 20.5014 4.07378 20.6953C4.26637 20.8891 4.52798 20.9987 4.80124 21C4.94564 20.9952 5.08795 20.964 5.22111 20.908L7.93275 19.9292L7.96691 19.916C8.04067 19.885 8.11994 19.8693 8.19994 19.8698C8.2737 19.87 8.34682 19.8836 8.4157 19.91C8.48079 19.9353 9.07181 20.1615 9.69538 20.3358C10.2137 20.4805 11.2921 20.6975 12.137 20.6975C14.5337 20.6975 16.7716 19.7693 18.4382 18.0834C20.0904 16.4104 21 14.1865 21 11.8188C21.0002 11.211 20.9358 10.6049 20.8079 10.0108C20.3925 8.05728 19.2908 6.27817 17.7054 5.0025ZM8.14289 13.2857C7.8886 13.2857 7.64002 13.2103 7.42859 13.069C7.21715 12.9278 7.05236 12.727 6.95505 12.492C6.85773 12.2571 6.83227 11.9986 6.88188 11.7492C6.93149 11.4998 7.05394 11.2707 7.23375 11.0909C7.41356 10.9111 7.64265 10.7886 7.89206 10.739C8.14146 10.6894 8.39997 10.7148 8.63491 10.8122C8.86984 10.9095 9.07064 11.0743 9.21192 11.2857C9.35319 11.4971 9.4286 11.7457 9.4286 12C9.4286 12.341 9.29314 12.668 9.05202 12.9091C8.8109 13.1503 8.48388 13.2857 8.14289 13.2857ZM12 13.2857C11.7457 13.2857 11.4972 13.2103 11.2857 13.069C11.0743 12.9278 10.9095 12.727 10.8122 12.492C10.7149 12.2571 10.6894 11.9986 10.739 11.7492C10.7886 11.4998 10.9111 11.2707 11.0909 11.0909C11.2707 10.9111 11.4998 10.7886 11.7492 10.739C11.9986 10.6894 12.2571 10.7148 12.492 10.8122C12.727 10.9095 12.9278 11.0743 13.0691 11.2857C13.2103 11.4971 13.2857 11.7457 13.2857 12C13.2857 12.341 13.1503 12.668 12.9092 12.9091C12.668 13.1503 12.341 13.2857 12 13.2857ZM15.8572 13.2857C15.6029 13.2857 15.3543 13.2103 15.1429 13.069C14.9314 12.9278 14.7666 12.727 14.6693 12.492C14.572 12.2571 14.5465 11.9986 14.5961 11.7492C14.6458 11.4998 14.7682 11.2707 14.948 11.0909C15.1278 10.9111 15.3569 10.7886 15.6063 10.739C15.8557 10.6894 16.1142 10.7148 16.3492 10.8122C16.5841 10.9095 16.7849 11.0743 16.9262 11.2857C17.0675 11.4971 17.1429 11.7457 17.1429 12C17.1429 12.341 17.0074 12.668 16.7663 12.9091C16.5252 13.1503 16.1981 13.2857 15.8572 13.2857Z" />
                    </svg>
                    <span class="font-[500]">
                      {{ formatNumber(product?.counter?.comment_count) }}
                    </span>
                  </div>
                </div>
                <div class="flex_row_s">
                  <div v-if="product?.product?.status === 1" class="pre-order">Pre-order</div>
                  <div v-else-if="product?.product?.status === 2" class="buy-now">Buy Now</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载更多状态（移出瀑布流容器，跟随文档流，显示在内容之后） -->
    <div v-if="loadMoreLoading" class="load-more-container">
      <div class="load-more-spinner">
        <svg
          class="animate-spin"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg">
          <circle
            cx="12"
            cy="12"
            r="10"
            stroke="currentColor"
            stroke-width="4"
            stroke-dasharray="31.416"
            stroke-dashoffset="31.416">
            <animate
              attributeName="stroke-dasharray"
              dur="2s"
              values="0 31.416;15.708 15.708;0 31.416"
              repeatCount="indefinite" />
            <animate
              attributeName="stroke-dashoffset"
              dur="2s"
              values="0;-15.708;-31.416"
              repeatCount="indefinite" />
          </circle>
        </svg>
        <span class="load-more-text">Loading more...</span>
      </div>
    </div>

    <!-- 没有更多数据提示（移出瀑布流容器，显示在内容末尾） -->
    <div
      v-else-if="!hasMore && list?.length > 0 && !loading && !loadMoreLoading"
      class="no-more-container">
      <div class="no-more-text">
        <div class="lline"></div>
        <div>No more</div>
        <div class="lline"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
  import type { FeedItem, FeedsParams } from '@/api/feeds';
  import { CommentAPI } from '@/api/comment';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '@/store/user';
  import { ElMessage } from 'element-plus';
  import { useLoginModal } from '@/composables/useLoginModal';
  import { ActivityVO, ActivityStatus, VoteRequest } from '@/types/activity';
  import VoteIcon from '@/components/feed/icons/VoteIcon.vue';
  import { ActivityAPI } from '@/api/activity';
  import { useDialogStore } from '@/store/dialog';
  const router = useRouter();
  const userStore = useUserStore();
  const list = ref<any>([]);
  const isLoggedIn = computed(() => userStore.isAuthenticated);
  const userInfo = computed(() => userStore.user);
  const scrollRefs: any = ref({});
  const props = defineProps({
    loading: { type: Boolean, default: false },
    loadMoreLoading: { type: Boolean, default: false },
    hasMore: { type: Boolean, default: true },
    designs: { type: Array, default: () => [] },
  });
  const dialogStore = useDialogStore();
  const emit = defineEmits(['setDesignList']);

  watch(
    () => props.designs,
    (newVal, oldVal) => {
      if (newVal?.length === oldVal?.length) return;
      list.value = newVal || [];
      nextTick(checkArrows);
    },
    { deep: true }
  );

  onMounted(() => {
    window.addEventListener('resize', handleResize);
  });

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
  });

  const handleResize = () => nextTick(checkArrows);

  // 投票
  const handleVote = async (product: FeedItem, item: any) => {
    try {
      if (product.is_vote === 0) {
        const voteParams: any = {
          aid: item.aid,
          feed_id: product.feed_id,
        };
        // 投票
        await ActivityAPI.vote(voteParams);
        product.is_vote = 1;
        dialogStore.toggleVoteDialog(true);
      }
    } catch (error: any) {
      console.error('Failed to vote:', error);
      const { code } = error.response.data || {};
      if (code === 100205) {
        ElMessage.info('The contest has ended.');
      }
    } finally {
    }
  };

  // 设置箭头显示状态
  const checkArrows = () => {
    list.value?.forEach((item: any) => {
      const { scrollLeft, scrollWidth, clientWidth } = scrollRefs.value[item.aid];
      const maxScroll = scrollWidth - clientWidth;
      item.showLeftArrow = scrollLeft > 24;
      item.showRightArrow = scrollLeft < maxScroll - 24;
    });
  };

  // 点击左右移动图片按钮
  const scrollView = async (item: any, type: 'left' | 'right') => {
    scrollRefs.value[item.aid]?.scrollBy({
      left: type === 'left' ? -240 : 240,
      behavior: 'smooth',
    });
    const timer = setTimeout(() => {
      const { scrollLeft, scrollWidth, clientWidth } = scrollRefs.value[item.aid];
      const maxScroll = scrollWidth - clientWidth;
      const findIndex = list.value?.findIndex((fItem: any) => fItem.aid === item.aid);
      list.value[findIndex] = {
        ...item,
        showLeftArrow: type === 'right' ? true : scrollLeft > 24,
        showRightArrow: type === 'left' ? true : scrollLeft < maxScroll - 24,
      };
      clearTimeout(timer);
    }, 300);
  };

  // 计算属性
  const hasProducts = computed(() => list.value && list.value.length > 0);

  // 点赞/取消点赞逻辑
  const likingIds = ref<Set<number>>(new Set());

  const isLiked = (product: FeedItem) => {
    return product.like_flag === 1;
  };

  const handleLike = async (product: FeedItem) => {
    const id: any = product.feed_id;
    if (likingIds.value.has(id)) return;

    likingIds.value.add(id);
    try {
      if (!isLiked(product)) {
        // 点赞
        await CommentAPI.isLike({ feed_id: id, liked_uid: product.uid });
        // 乐观更新状态
        product.like_flag = 1;
        if (product.counter && typeof product.counter.like_count === 'number') {
          product.counter.like_count += 1;
        }
      } else {
        // 取消点赞
        await CommentAPI.unLike({ feed_id: id, liked_uid: product.uid });
        // 乐观更新状态
        product.like_flag = 0;
        if (
          product.counter &&
          typeof product.counter.like_count === 'number' &&
          product.counter.like_count > 0
        ) {
          product.counter.like_count -= 1;
        }
      }
    } catch (error) {
      console.error('点赞操作失败:', error);
      // 发生错误时恢复原状态
      product.like_flag = isLiked(product) ? 0 : 1;
    } finally {
      likingIds.value.delete(id);
    }
  };

  // 方法
  const viewProduct = (product: FeedItem) => {
    if (!isLoggedIn.value || !userInfo.value) {
      const { showModal } = useLoginModal();
      showModal();
      return;
    }
    router.push({ path: '/detail', query: { feed_id: product?.feed_id } });
  };

  const formatNumber = (num: number) => {
    if (!num) return '0';
    if (num >= 1000) {
      return (num / 1000).toFixed(1) + 'k';
    }
    return num.toString();
  };

  // 计算距离开始时间还有多少天
  const diffTime = (startTime: string) => {
    const diff = new Date(startTime).getTime() - Date.now();
    return Math.ceil(diff / (1000 * 60 * 60 * 24));
  };

  const goContest = (item: any) => {
    router.push({ path: '/contest/detail', query: { aid: item?.aid } });
  };
</script>

<style lang="scss" scoped>
  @use '@/styles/variables' as *;

  .product-container {
  }
  .time_text {
    font-size: 14px;
    font-weight: 500;
  }

  .des-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 24px;
    padding-right: 24px;
    justify-content: space-between;
    .designs_item {
      flex: 1; /* 让元素平分剩余空间 */
      min-width: calc(50% - 12px); /* 确保一行最多2个（减去gap的一半，避免换行异常） */
      max-width: calc(50% - 12px);
      display: flex;
      flex-direction: column;
      margin-bottom: 40px;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
    }
    .right_btn {
      z-index: 99;
      position: absolute;
      right: 10px;
      bottom: 150px;
    }
    .left_btn {
      z-index: 99;
      position: absolute;
      left: 10px;
      bottom: 150px;
    }
    .bg_img_view {
      width: 100%;
      height: 379px;
      overflow: hidden;
    }
    .back_img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .feed_list {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      padding-left: 24px;
      padding-bottom: 16px;
    }
    .feed_list::-webkit-scrollbar {
      display: none;
    }
    .pro_img {
      width: 240px;
      height: 240px;
      object-fit: cover;
      border-radius: 8px;
    }
  }

  .flex_row_s {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .masonry-item {
    width: 240px;
    flex-shrink: 0;
    margin-right: 16px;

    // 加载状态样式
    &.loading {
      opacity: 0.7;
      background: #f5f5f5;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 24px;
        height: 24px;
        border: 2px solid #e0e0e0;
        border-top: 2px solid #3b82f6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        z-index: 1;
      }
    }
  }

  @keyframes spin {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  .product-image {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    .voted_icon {
      display: inline-flex;
      padding: 8px 12px;
      align-items: center;
      gap: 16px;
      border-radius: 30px 0 0 30px;
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(2px);
      position: absolute;
      right: 0;
      top: 0;
    }

    img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
    }
  }

  .product-info {
    padding-top: 12px;
  }

  .product-name {
    color: #222;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pre-order {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(---, #eaf5e0);
    backdrop-filter: blur(2px);
    flex-shrink: 0;
    color: var(---, #389e0d);

    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }
  .buy-now {
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: var(---, #fbe6db);
    backdrop-filter: blur(2px);
    flex-shrink: 0;
    color: var(---, #f76b1b);

    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
  }

  .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
  }

  .loading-text {
    font-size: 16px;
    color: #7a7a7a;
  }

  .empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
  }

  .load-more-container {
    position: static; // 跟随文档流
    display: flex;
    justify-content: center;
    padding: 24px 0;
  }

  .load-more-spinner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #666;
    font-size: 14px;

    font-weight: 500;
  }

  .load-more-text {
    white-space: nowrap;
  }

  .no-more-container {
    position: static; // 跟随文档流
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 0; // 较大内边距，和内容保持距离
  }

  .no-more-text {
    padding: 12px 24px;
    color: #7a7a7a;
    font-size: 14px;

    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .lline {
    width: 60px;
    height: 1px;
    border-radius: 5px;
    background-color: #e1e2e3;
  }
</style>
